<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        div{
            /*  我们在css设置标签的宽高, 并不是盒子模型的大小, 仅仅盒子模型中元素内容区域的大小  */
            width: 100px;
            height: 100px;

            /* 内边距区域 */
            padding: 100px;

            /* 边框区域*/
            border:  100px solid white;

            /* 外边距区域*/
            margin: 100px;
        }

    </style>
</head>
<body>

    <!--  一份html代码被浏览器解析显示,  一个标签最终在页面上所占据的空间是一个长方形,
           这个标签在页面上占据的长方形大小, 就是这个标签的盒子模型
           占据的大小, 由四部分构成:  元素内容区域, 内边距, 边框, 外边距    -->


    <hr>
    <div>
        div
    </div>
    <hr>


</body>
</html>
